---
import { createLink, getPathParamsFromId, getTextLocalized, isExternal } from "../languages";
import { isNavGroup, isNavLink, isNavLinkGroup, type LMobileNavItem } from "../navigation";

import IconChevronRight from "../icons/Chevron.astro";
import IconExternal from "../icons/External.astro";
import { nanoid } from "nanoid";

const { lang } = getPathParamsFromId(Astro.url.pathname);

interface Props {
  items: LMobileNavItem[];
  firstLevel?: boolean;
  expandDefault?: boolean;
}

const { firstLevel = false, expandDefault, items } = Astro.props;
const instanceId = nanoid(5);
---

<ul class:list={{ nested: !firstLevel }}>
  {
    items.map((item) => {
      const isExpandable = isNavLinkGroup(item) || isNavGroup(item);
      const isLink = isNavLink(item) || isNavLinkGroup(item);
      const text = getTextLocalized(item, lang);
      const expanded = expandDefault ? expandDefault : item.active;

      if (isLink) {
        const external = isExternal(item);
        return (
          <li>
            <div class="line">
              {isExpandable ? (
                <button
                  type="button"
                  data-target={item.id}
                  data-instance={instanceId}
                  class:list={{ expander: true, standalone: true, expanded }}
                >
                  <IconChevronRight size={18} />
                </button>
              ) : null}
              <a
                class:list={{ active: item.active }}
                href={createLink(item, lang)}
                target={external ? "_blank" : undefined}
              >
                {text}
                {external ? <IconExternal /> : null}
              </a>
            </div>
            {isExpandable ? (
              <div
                data-id={item.id}
                data-instance={instanceId}
                class:list={{ "expand-section": true, expanded }}
              >
                <Astro.self items={item.items} />
              </div>
            ) : null}
          </li>
        );
      }

      if (isExpandable) {
        return (
          <li>
            <div class="line">
              <button
                data-target={item.id}
                data-instance={instanceId}
                type="button"
                class:list={{ expander: true, noLink: true, expanded }}
              >
                <IconChevronRight size={18} />
                {text}
              </button>
            </div>
            <div
              data-id={item.id}
              data-instance={instanceId}
              class:list={{ "expand-section": true, expanded }}
            >
              <Astro.self items={item.items} />
            </div>
          </li>
        );
      }

      return (
        <li>
          <div class="line">
            <span>{text}</span>
          </div>
        </li>
      );
    })
  }
</ul>

<script>
  document.querySelectorAll(".expander").forEach((button) => {
    const btn = button as HTMLButtonElement;
    const id = btn.dataset.target;
    const instance = btn.dataset.instance;
    const target = document.querySelector(`[data-id="${id}"][data-instance="${instance}"]`);
    if (target) {
      btn.addEventListener("click", function () {
        btn.classList.toggle("expanded");
        target.classList.toggle("expanded");
      });
    }
  });
</script>

<style>
  ul {
    @apply relative flex flex-col gap-1;
  }

  ul.nested {
    @apply pl-3;
  }

  ul.nested::before {
    @apply absolute inset-y-1 left-0 w-[1px];
    content: "";
    background-color: var(--theme-divider);
  }

  li {
    @apply relative flex flex-col gap-2;
    background-color: var(--theme-bg);
  }

  li > .line {
    @apply flex items-center justify-between gap-1;
  }

  .line span {
    @apply select-none px-4 py-2 text-base;
    font-weight: 300;
  }

  a {
    @apply flex grow cursor-pointer items-center gap-0 rounded px-4 py-2 text-base transition-colors;
    color: var(--theme-text);

    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    word-break: break-word;
  }

  a:hover {
    background-color: var(--theme-divider);
  }

  a.active {
    color: var(--theme-text-accent);
  }

  button {
    @apply cursor-pointer rounded p-2 transition-colors;
    color: var(--theme-text);
  }

  button:hover {
    background-color: var(--theme-divider);
  }

  button.noLink {
    @apply flex grow p-2 text-base font-light;
  }

  button.standalone {
    background-color: var(--theme-divider);
    @apply -ml-1 box-content flex h-6 w-6 items-center justify-center;
  }

  button.standalone:hover {
    background-color: var(--theme-divider-light);
  }

  .expander :global(svg) {
    @apply transform-gpu will-change-transform;
  }

  .expander.expanded :global(svg) {
    @apply rotate-90;
  }

  .expand-section {
    display: none;
    @apply flex-col;
  }

  .expand-section:global(.expanded) {
    display: flex;
  }
</style>
